<div
    class="range_picker"
    (clickOutside)="closeFromOutside()"
    [clickOutsideExceptionClass]="[
        'set_time',
        'smart_picker',
        'duration-picker-element',
        'mat-calendar-body-cell-content',
        'mat-button-wrapper',
        'mat-button',
        'mat-calendar-arrow',
        'mat-button-base',
        'mat-calendar-table-header',
        'mat-overlay-transparent-backdrop',
        'ng-star-inserted',
        'mat-calendar-table',
        'mat-calendar-content']"
>
    <div class="main_input_block" title="{{title}}">
        <input class="main_input" [ngClass]="{'ng-invalid':(!maiInputValid)}" type="text" [(ngModel)]="model" placeholder="{{placeholder}}"  (ngModelChange)="filterChanged()">
        <span *ngIf="model" class="glyphicon glyphicon-remove clear_picker" (click)="hardClear()"></span>
        <span class="glyphicon glyphicon-calendar" (click)="togglePicker()"></span>
    </div>
    <ng-container *ngIf="datePickerMode">
        <mat-form-field class="example-full-width"  class="material_calendar single_date_mode"  [floatLabel]="'never'">
            <input matInput
                   [matDatepicker]="picker"
                   i18n-placeholder="@@placeholder.date_formated" placeholder="Date (yyyymmdd)"
                   [(ngModel)]="singleDateModel"
                   (dateInput)="setSingeDatePicker('singleDateModel', $event)"
                   (dateChange)="setSingeDatePicker('singleDateModel', $event)"
            >
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
    </ng-container>
    <ng-container *ngIf="!datePickerMode">
        <div class="picker" *ngIf="showPicker">
            <div class="close" (click)="close()"><span class="glyphicon glyphicon-remove"></span></div>
            <h5>{{header}}</h5>
            <div class="left {{mode}}_mode" *ngIf="!onlyTime">
                <mat-form-field class="material_calendar"  *ngIf="mode === 'range' || mode === 'rightOpen'"  [floatLabel]="'never'">
                    <input matInput
                           [matDatepicker]="picker"
                           i18n-placeholder="@@placeholder.from_formated" placeholder="from (yyyymmdd)"
                           [(ngModel)]="fromModel"
                           (dateInput)="addEvent('fromModel', $event)"
                           (dateChange)="addEvent('fromModel', $event)"
                    >
                    <mat-datepicker-toggle matSuffix [for]="picker">
                        <mat-icon matDatepickerToggleIcon>
                            <span class="glyphicon glyphicon-calendar"></span>
                        </mat-icon>
                    </mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <!--            <p-calendar
                                    (onFocus)="closeCalendar('fromCalendarObject')" #fromCalendar
                                    *ngIf="mode === 'range' || mode === 'rightOpen'"
                                    dataType="string"
                                    [(ngModel)]="fromModel"
                                    dateFormat="{{dateFormat}}"
                                    monthNavigator="true"
                                    yearNavigator="true"
                                    yearRange="1800:2100"
                                    i18n-placeholder placeholder="from (yyyymmdd)"
                                    showIcon="true"
                                    showOnFocus="false"
                                    monthNavigator="true"
                                    showButtonBar="true"></p-calendar>-->
                <div class="infinit" *ngIf="!(mode === 'range' || mode === 'rightOpen') && mode != 'single'" >&infin;</div>
                <span class="dash" *ngIf="mode != 'single'">-</span>
                <mat-form-field class="material_calendar"  *ngIf="mode === 'range' || mode === 'leftOpen'"  [floatLabel]="'never'">
                    <input matInput
                           [matDatepicker]="picker"
                           i18n-placeholder="@@placeholder.to_formated" placeholder="to (yyyymmdd)"
                           [(ngModel)]="toModel"
                           (dateInput)="addEvent('toModel', $event)"
                           (dateChange)="addEvent('toModel', $event)"
                    >
                    <mat-datepicker-toggle matSuffix [for]="picker">
                        <mat-icon matDatepickerToggleIcon>
                            <span class="glyphicon glyphicon-calendar"></span>
                        </mat-icon>
                    </mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <!--            <p-calendar
                                    (onFocus)="closeCalendar('toCalendarObject')"
                                    #toCalendar
                                    *ngIf="mode === 'range' || mode === 'leftOpen'"
                                    dataType="string"
                                    [(ngModel)]="toModel"
                                    dateFormat="{{dateFormat}}"
                                    monthNavigator="true"
                                    yearNavigator="true"
                                    yearRange="1800:2100"
                                    i18n-placeholder placeholder="to (yyyymmdd)"
                                    showOnFocus="false"
                                    showIcon="true"
                            ></p-calendar>-->


                <div class="infinit" *ngIf="!(mode === 'range' || mode === 'leftOpen') && mode != 'single'">&infin;</div>
                <mat-form-field class="material_calendar single_datepicker"  *ngIf="mode === 'single'"  [floatLabel]="'never'">
                    <input matInput
                           [matDatepicker]="picker"
                           i18n-placeholder="@@placeholder.date_formated" placeholder="Date (yyyymmdd)"
                           [(ngModel)]="singleDateModel"
                           (dateInput)="addEvent('toModel', $event)"
                           (dateChange)="addEvent('toModel', $event)"
                    >
                    <mat-datepicker-toggle matSuffix [for]="picker">
                        <mat-icon matDatepickerToggleIcon>
                            <span class="glyphicon glyphicon-calendar"></span>
                        </mat-icon>
                    </mat-datepicker-toggle>
                    <mat-datepicker #picker></mat-datepicker>
                </mat-form-field>
                <!--            <p-calendar
                                    (onFocus)="closeCalendar('singleCalendarObject')"
                                    #singleCalendar
                                    *ngIf="mode === 'single'"
                                    dataType="string"
                                    [(ngModel)]="singleDateModel"
                                    dateFormat="{{dateFormat}}"
                                    monthNavigator="true"
                                    yearNavigator="true"
                                    yearRange="1800:2100"
                                    i18n-placeholder placeholder="Date (yyyymmdd)"
                                    showIcon="true"
                            ></p-calendar>-->
            </div>
            <ul *ngIf="!onlyTime && !onlySingleMode" class="fast_picker" [ngClass]="{'smart_active':smartPickerActive}">
                <li *ngIf="!smartPickerActive" (click)="today()" i18n="@@today">Today</li>
                <li *ngIf="!smartPickerActive" (click)="thisMonth()" i18n="@@this_month">This Month</li>
                <!--<li *ngIf="!smartPickerActive" (click)="lastYear()">Last Year</li>-->
                <li *ngIf="!smartPickerActive" class="select_parent">
                    <ul class="j4care_select" (clickOutside)="closeSelectOptions()">
                        <li class="placeholder" (click)="toggleSelectOption()" i18n="@@fast_picker">Fast Picker</li>
                        <ng-container *ngIf="showSelectOptions">
                            <li (click)="fastPicker('yesterday')" i18n="@@yesterday">Yesterday</li>
                            <li (click)="fastPicker('this_week')" i18n="@@this_week">This Week</li>
                            <li (click)="fastPicker('last_week')" i18n="@@last_week">Last Week</li>
                            <li (click)="fastPicker('last_month')" i18n="@@last_month">Last Month</li>
                            <li (click)="fastPicker('this_quarter')" i18n="@@this_quarter">This Quarter</li>
                            <li (click)="fastPicker('last_quarter')" i18n="@@last_quarter">Last Quarter</li>
                            <li (click)="fastPicker('this_year')" i18n="@@this_year">This Year</li>
                            <li (click)="fastPicker('last_year')" i18n="@@last_year">Last Year</li>
                        </ng-container>
                    </ul>
                </li>
                <li *ngIf="smartPickerActive" class="smart_input">
                    <input type="text" i18n-title="@@title.use_duration_format" title="Use duration format (ISO 8601) ((P)nYnMnDTnHnMnS or (P)nW) to set first date/time of the range subtracted from today/now (Format is not case sensitive and P on start is optional). For Example 1y => one year back, 2y3m => 2 years and 3 months back, t2h12m => 2 hours and 12 minutes from now etc." i18n-placeholder="@@placeholder.range-picker.hover_for_more_info" placeholder="Hover for more Info" [(ngModel)]="smartInput" (ngModelChange)="smartInputChange($event)">
                </li>
                <li (click)="smartPicker()">
                    <span class="smart_picker" *ngIf="!smartPickerActive" i18n="@@smart_picker" i18n-title="@@title.use_duration_format" title="Use duration format (ISO 8601) ((P)nYnMnDTnHnMnS or (P)nW) to set first date/time of the range subtracted from today/now (Format is not case sensitive and P on start is optional). For Example 1y => one year back, 2y3m => 2 years and 3 months back, t2h12m => 2 hours and 12 minutes from now etc.">Smart Picker</span>
                    <span class="smart_picker" *ngIf="smartPickerActive" i18n="@@fast_picker">Fast Picker</span>
                </li>
            </ul>
            <ul *ngIf="dateRange" class="fast_picker smart_active duration">
                <li class="smart_input"><input type="text" i18n-placeholder="@@placeholder.range-picker.maximal_study_date_range" placeholder="Maximal Study Date Range" [(ngModel)]="SplitStudyDateRange"></li>
                <duration-picker *ngIf="showDurationPaicker" [mode]="'datePicker'" (onValueSet)="setDuration($event)" [value]="SplitStudyDateRange"></duration-picker>
                <li (click)="SplitStudyDateRange = ''" class="glyphicon glyphicon-remove duration_buttons"></li>
                <li (click)="showDurationPaicker = !showDurationPaicker" class="duration_buttons"></li>
            </ul>
            <div class="include_time_block" *ngIf="!defaultTime">
                <label *ngIf="!onlyTime && !onlyDate">
                    <input type="checkbox" [(ngModel)]="includeTime" (change)="toggleTime()"> <ng-container i18n="@@include_time">Include Time</ng-container>
                </label>
            </div>
            <div class="left {{mode}}_mode" *ngIf="includeTime || onlyTime" >
                <time-picker [model]="fromTimeModel" cohereMode="true" (onValueSet)="fromTimeModel = $event" i18n-placeholder="@@placeholder.from_formated" placeholder="from (hh:mm:ss)" *ngIf="mode === 'range' || mode === 'rightOpen'"></time-picker>
                <div class="infinit" *ngIf="!(mode === 'range' || mode === 'rightOpen') && mode != 'single'" >&infin;</div>
                <span *ngIf="mode != 'single'" class="dash">-</span>
                <time-picker [model]="toTimeModel" *ngIf="mode === 'range' || mode === 'leftOpen'" cohereMode="true" (onValueSet)="toTimeModel = $event" i18n-placeholder="@@placeholder.to_formated" placeholder="to (hh:mm:ss)"></time-picker>
                <div class="infinit" *ngIf="!(mode === 'range' || mode === 'leftOpen') && mode != 'single'">&infin;</div>
                <time-picker *ngIf="mode === 'single'"  [model]="singleTimeModel" cohereMode="true" (onValueSet)="singleTimeModel = $event" placeholder="(hh:mm:ss)"></time-picker>
            </div>
            <ul class="interval" *ngIf="!onlySingleMode">
                <li class="range" [ngClass]="{'active':mode==='range'}" (click)="changeMode('range')" i18n="@@between">Between</li>
                <li *ngIf="onlyTime" class="single" [ngClass]="{'active':mode==='single'}" (click)="changeMode('single')" i18n-title="@@specific_time" title="Specific Time" i18n="@@spec_time">Spec. Time</li>
                <li *ngIf="!onlyTime" class="single" [ngClass]="{'active':mode==='single'}" (click)="changeMode('single')" i18n="@@single_date">Single Date</li>
                <li class="rightOpen" [ngClass]="{'active':mode==='rightOpen'}" (click)="changeMode('rightOpen')" i18n="@@after">After</li>
                <li class="leftOpen" [ngClass]="{'active':mode==='leftOpen'}" (click)="changeMode('leftOpen')" i18n="@@before">Before</li>
            </ul>
            <!--        <div class="right">
                    </div>-->
            <button (click)="setRange()" i18n="@@Set">Set</button>
            <button class="clear" (click)="clear()" i18n="@@Clear">Clear</button>
        </div>
    </ng-container>
</div>